<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<!-- <view class="page-nav" style="background-color: #EE5953;" :style="'height:' +StatusBar+ 'px'"></view>
		<view class="header-wrap" :style="'padding-btop: ' + StatusBar + 'px'">
			<view class="header-title">
				<view class="header-left">
					<view class="header-name">
						<view class="header-left-name">
							同花顺模拟
						</view>
						<view class="header-left-state">
							<view class="header-left-label">
								模拟
							</view>
							<view class="header-left-code">
								****0455
							</view>
						</view>
					</view>
					<view class="header-left-arrow">
						<image class="img-full" src="@/static/transaction/arrow-but.png"></image>
					</view>
				</view>
				<view class="header-right">
					<view class="header-right-item">
						<image class="img-full" src="@/static/transaction/header-icon1.png"></image>
					</view>
					<view class="header-right-item">
						<image class="img-full" src="@/static/transaction/header-icon2.png"></image>
					</view>
					<view class="header-right-item" @click="toManagement">
						<image class="img-full" src="@/static/price/set.png"></image>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 对于mescroll-body: 需设置:sticky="true", 此应避免在mescroll-body标签前面加其他非定位的元素, 否则下拉区域会被挤出, 无法会隐藏.-->
		<!-- 对于mescroll-uni: 则无需设置:sticky="true", 无其他限制和要求 -->
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-tabs">
				<view class="page-nav" style="background-color: #EE5953;" :style="'height:' +StatusBar+ 'px'"></view>
				<view class="header-wrap" :style="'padding-btop: ' + StatusBar + 'px'">
					<view class="header-title">
						<view class="header-left">
							<view class="header-name">
								<view class="header-left-name">
									同花顺模拟
								</view>
								<view class="header-left-state">
									<view class="header-left-label">
										模拟
									</view>
									<view class="header-left-code">
										****0455
									</view>
								</view>
							</view>
							<view class="header-left-arrow">
								<image class="img-full" src="@/static/transaction/arrow-but.png"></image>
							</view>
						</view>
						<view class="header-right">
							<view class="header-right-item">
								<image class="img-full" src="@/static/transaction/header-icon1.png"></image>
							</view>
							<view class="header-right-item">
								<image class="img-full" src="@/static/transaction/header-icon2.png"></image>
							</view>
							<view class="header-right-item" @click="toManagement">
								<image class="img-full" src="@/static/price/set.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="content-plate">
				<view class="data-overview">
					<view class="data-overview-item">
						<view class="data-overview-key">
							权益:
						</view>
						<view class="data-overview-val">
							{{qyData.amount}}
						</view>
					</view>
					<view class="data-overview-item">
						<view class="data-overview-key">
							可用:
						</view>
						<view class="data-overview-val">
							{{qyData.avaiable}}
						</view>
					</view>
					<view class="data-overview-item">
						<view class="data-overview-key">
							使用率:
						</view>
						<view class="data-overview-val">
							{{(1-(qyData.avaiable/qyData.amount)).toFixed(3)}}%
						</view>
						<!-- 	<view class="data-overview-illustrate">
							<image class="img-full" src="@/static/transaction/illustrate.png"></image>
						</view> -->
					</view>
				</view>
				<view class="data-situation">
					<view class="data-situation-left">
						<view class="search-box">
							<uni-easyinput class="" :inputBorder="false" :clearable="false" primaryColor="#C2C2C2"
								trim="all" @input="changeEv" v-model="oder.instid" placeholder="请输入合约号"
								placeholderStyle="font-size: 28rpx;"></uni-easyinput>
							<view class="data-situation-box-right">
								<view class="situation-search-icon" @click="showPopup()">
									<image class="img-full" src="@/static/transaction/search.png"></image>
								</view>
							</view>
						</view>
						<view class="search-box">
							<view class="data-situation-box-left">
								<view class="situation-control-icon">
									<view class="situation-control-minus"></view>
								</view>
							</view>
							<uni-easyinput class="situation-input" :inputBorder="false" :clearable="false"
								primaryColor="#C2C2C2" trim="all" type="number" v-model="oder.price" placeholder="最新价格"
								placeholderStyle="font-size: 32rpx;"></uni-easyinput>
							<!-- 	<view class="situation-price">
							   <input type="number" placeholder="最新价格" v-model="oder.price" />
							</view> -->
							<view class="data-situation-box-right">
								<view class="situation-control-icon">
									<view class="situation-control-minus"></view>
									<view class="situation-control-add"></view>
								</view>
							</view>
						</view>
						<view class="search-box">
							<view class="data-situation-box-left">
								<view class="situation-control-icon">
									<view class="situation-control-minus"></view>
								</view>
							</view>
							<uni-easyinput class="situation-input" :inputBorder="false" :clearable="false"
								primaryColor="#C2C2C2" trim="all" type="number" v-model="oder.vol" placeholder="手数"
								placeholderStyle="font-size: 32rpx;"></uni-easyinput>
							<view class="data-situation-box-right">
								<view class="situation-control-icon">
									<view class="situation-control-minus"></view>
									<view class="situation-control-add"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="data-situation-right">
						<view class="historical-price">
							<!-- 	<view class="new-price">
								<view class="price-label">
									卖一
								</view>
								<view class="historical-price-row">
									<view class="price-num">
										{{idata.A&&idata.A.toFixed(2)}}
									</view>
									<view class="">

									</view>
								</view>
							</view> -->
							<view class="historical-price-row">
								<view class="price-label">
									<view class="price-label" style="padding: 0;">
										卖一
									</view>
									<view class="historical-price-row">
										<view class="price-num">
											<!-- 2441.0 -->
											<!-- {{idata.A&&idata.A.toFixed(2)}} -->
										</view>
										<!-- <view class="historical-num">
									1
								</view> -->
									</view>
								</view>
								<view class="price-num">
									{{idata.A&&idata.A.toFixed(2)}}
								</view>
								<view class="historical-num">
									{{idata.AV}}
								</view>
							</view>

							<view class="historical-price-row">
								<view class="price-label">
									最新
								</view>
								<view class="price-num">
									{{idata.C&&idata.C.toFixed(2)}}
								</view>
								<view class="historical-num">
								</view>
							</view>
							<view class="historical-price-row">
								<view class="price-label">
									买一
								</view>
								<view class="price-num">
									{{idata.B&&idata.B.toFixed(2)}}
								</view>
								<view class="historical-num">
									{{idata.BV}}
								</view>
							</view>
						</view>
						<view class="instructions">
							<view class="instructions-text">
							</view>
							<view class="instructions-text">
								1手保证金约 <text></text>元
							</view>
						</view>
					</view>
				</view>

				<view class="order-grabbing-mode">
					<view class="grabbing-mode-item mode1">
						<view class="grabbing-amount">
							{{oder.vol*oder.price}}
						</view>
						<view class="grabbing-mode-text" @click="openPingduo(1)">
							开多
						</view>
					</view>
					<view class="grabbing-mode-item mode2">
						<view class="grabbing-amount">
							{{oder.vol*oder.price}}
						</view>
						<view class="grabbing-mode-text" @click="openPingduo(2)">
							开空
						</view>
					</view>
					<view class="grabbing-mode-item mode3" @click="openPingduo(3)">
						<view class="grabbing-amount">
							{{oder.vol*oder.price}}
						</view>
						<view class="grabbing-mode-text">
							平仓
						</view>
					</view>
				</view>
			</view>
			<view class="data-table">
				<view class="table-tab">
					<view class="table-tab-item" @click="switchTab(i)" :class="{'active': tabIndex === i}"
						v-for="(item, i) in tableTab" :key="i">
						{{item.table}}
					</view>
				</view>
				<uni-table emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="110rpx" align="center" v-for="(item,index) in c_list[c_current]" :key="index">
							<view class="table-th">
								{{item.title}}
							</view>
						</uni-th>
						<!-- <uni-th width="100rpx" >
							<view class="table-th">
								类型
							</view>
						</uni-th>
						<uni-th width="100rpx" align="center">
							<view class="table-th">
								可用/总仓
							</view>
						</uni-th>
						<uni-th width="100rpx" align="center">
							<view class="table-th">
								开仓均价
							</view>
						</uni-th>
						<uni-th width="100rpx" align="center">
							<view class="table-th">
								逐笔盈亏
							</view>
						</uni-th> -->
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tableData[c_current]" :key="index">
						<uni-td v-for="(zitem, i) in c_list[c_current]" :key="i">
							<view class="table-td">
								{{item[zitem.key]}}
							</view>
						</uni-td>
						<!-- 	<uni-td>
							<view class="table-td">
								{{item.inst_id}}
							</view>
						</uni-td>
						<uni-td>
							<view class="table-td red">
								{{item.dc===0?'多':'空'}}
							</view>
						</uni-td>
						<uni-td>
							<view class="table-td">
								{{item.vol-item.vol_closing}}/{{item.vol}}
							</view>
						</uni-td>
						<uni-td>
							<view class="table-td red">
								{{item.avg_price}}
							</view>
						</uni-td>
						<uni-td>
							<view class="table-td">
								{{item.profit}}
							</view>
						</uni-td> -->
					</uni-tr>
				</uni-table>
			</view>
			<view class="operate-box">
				<view class="operate-but">
					看行情
				</view>
				<view class="operate-but">
					止盈止损
				</view>
				<view class="operate-but" @click="openBackhand">
					反手
				</view>
			</view>

		</mescroll-body>

		<!-- 此处可以写其他fixed定位元素 -->
		<!-- 合约弹框 -->
		<uni-popup ref="popup" @change="change" :is-mask-click="false">
			<view class="popup-content">
				<view class="popup-title">
					XXX2041买多
				</view>
				<uni-icons class="clone-icon" type="closeempty" size="24" color="#CCCCCC"
					@click="cloneBackhand"></uni-icons>
				<view class="backhand-data">
					<view class="backhand-data-item">
						<view class="backhand-data-key">
							<view class="backhand-data-icon">
								<image class="img-full" src="@/static/transaction/price.png"></image>
							</view>
							<view class="backhand-data-key-text">
								委托价
							</view>
						</view>
						<view class="backhand-data-val">
							1687
						</view>
					</view>
					<view class="backhand-data-item">
						<view class="backhand-data-key">
							<view class="backhand-data-icon">
								<image class="img-full" src="@/static/transaction/statistics.png"></image>
							</view>
							<view class="backhand-data-key-text">
								手数
							</view>
						</view>
						<view class="backhand-data-val">
							2
						</view>
					</view>
				</view>
				<view class="explanatory">
					注：市价是以当天的涨停板价下单
				</view>
				<view class="determine-but">
					确认反手
				</view>
			</view>
		</uni-popup>
		<!-- 底部弹框 -->
		<uni-popup ref="pingduo" type="center">
			<view class="pingduo-center">
				<view class="pingduo-title">
					委托{{payType==1?'开多':payType==2?'开空':payType==3?'平仓':'--'}}确认
				</view>
				<view class="pingduo-form">
					<view class="pingduo-form-row">
						<view class="pingduo-form-key">
							合约
						</view>
						<view class="pingduo-form-val">
							纯碱{{oder.instid}}
						</view>
						<view class="table">
							{{payType==1?'多':payType==2?'空':payType==3?'平':'--'}}
						</view>
					</view>
					<view class="pingduo-form-row">
						<view class="pingduo-form-key">
							类型
						</view>
						<view class="pingduo-form-val">
							平{{payType==1?'多':payType==2?'空':payType==3?'平':'--'}}仓
						</view>
					</view>
					<view class="pingduo-form-row">
						<view class="pingduo-form-key">
							价格
						</view>
						<view class="pingduo-form-val">
							{{oder.price}}
						</view>
					</view>
					<view class="pingduo-form-row">
						<view class="pingduo-form-key">
							手数
						</view>
						<view class="pingduo-form-val">
							{{oder.vol}}手
						</view>
					</view>
				</view>
				<view class="prompt">
					确认提交以上委托?
				</view>
				<view class="buts">
					<view class="but but1" @click="closePingduo(1)">
						取消
					</view>
					<view class="but but2" @click="closePingduo(2)">
						确认{{payType==1?'开多':payType==2?'开空':payType==3?'平仓':'--'}}
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 合约列表弹框 -->
		<uni-popup ref="contract" type="center">
			<view class="pingduo-center" style="height: 900rpx;overflow: hidden;">
				<view class="pingduo-title">
					期货合约列表
				</view>
				<view class="pingduo-form">
					<view class="pingduo-form-row">

						<view style="flex: 1;">
							合约名
						</view>
						<view style="flex: 1;">
							编码
						</view>
						<view style="flex: 1;">
							操作
						</view>
					</view>
					<view style="height: 600rpx;overflow: auto;">
						<radio-group @change="checkboxChange">
							<view class="pingduo-form-row" v-for="(item,index) in contractList" :key="index">
								<view style="flex: 1;">
									{{item.N}}
								</view>
								<view style="flex: 1;">
									{{item.I}}
								</view>
								<view style="flex: 1;">
									<radio :value="item.I" />
								</view>
							</view>
						</radio-group>

					</view>

				</view>


				<view class="buts">
					<view class="but but1" @click="cancePopup()">
						取消
					</view>
					<view class="but but2" @click="contract()">
						确认
					</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import Socket from '@/utils/ws.js'
	import Socket1 from '@/utils/ws1.js'
	import {
		getOrder,
		utoolTime
	} from '@/utils/utools.js'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 权益数据
				qyData: {
					amount: 0,
					avaiable: 0
				},

				StatusBar: this.StatusBar,
				form: {
					search: 'rb2410',
					transactions: '',
				},
				tabIndex: 0,
				tableTab: [{
					table: '持仓',
				}, {
					table: '挂单',
				}, {
					table: '委托',
				}, {
					table: '成交',
				}],
				c_current: 0,
				c_list: [
					[{
						title: '合约',
						key: 'inst_id'
					}, {
						title: '类型',
						key: 'c_dc'
					}, {
						title: '可用/总仓',
						key: 'c_vol'
					}, {
						title: '开仓均价',
						key: 'avg_price'
					}, {
						title: '逐笔盈亏',
						key: 'profit'
					}],
					// 报单	inst_id   dc   price    vol   status  insert_time
					// 成交	inst_id  dc    price    vol   deal_time
					[{
						title: '合约',
						key: 'inst_id'
					}, {
						title: '方向',
						key: 'c_dc'
					}, {
						title: '价格',
						key: 'price'
					}, {
						title: '数量',
						key: 'vol'
					}, {
						title: '状态',
						key: 'c_status'
					}, {
						title: '时间',
						key: 'c_insert_time'
					}],
					[{
						title: '合约',
						key: 'inst_id'
					}, {
						title: '方向',
						key: 'c_dc'
					}, {
						title: '价格',
						key: 'price'
					}, {
						title: '数量',
						key: 'vol'
					}, {
						title: '状态',
						key: 'c_status'
					}, {
						title: '时间',
						key: 'c_insert_time'
					}],


					[{
						title: '合约',
						key: 'inst_id'
					}, {
						title: '方向',
						key: 'c_dc'
					}, {
						title: '价格',
						key: 'price'
					}, {
						title: '数量',
						key: 'vol'
					}, {
						title: '时间',
						key: 'c_deal_time'
					}]
				],
				tableData: [
					[],
					[],
					[],
					[]
				],
				oder: {
					instid: '',
					dc: 0, // 0 多  1 空 
					kp: 0, // 0 开  1 平
					price: 0,
					vol: 1 //数量
				},
				// 支付类型  1 开多  2 开少  3 平仓
				payType: 1,
				// 合约列表
				contractList: [],
				checkboxList: [],
				// 合约数据
				idata: {}
			}
		},
		computed: {

		},
		onLoad(e) {
			// uni.hideTabBar({})
		},
		onShow() {
			
		},
		methods: {
			// 展示合约列表
			showPopup() {
				let data = (uni.getStorageSync('ISS') && JSON.parse(uni.getStorageSync(
					'ISS'))) || [];
				console.log(data, '=======>data000000000')

				this.contractList = data;
				this.$refs.contract.open()
			},
			// 取消
			cancePopup() {
				this.$refs.contract.close()
			},
			// 选择合约
			checkboxChange(e) {
				console.log(e.detail.value, '===>val')
				this.checkboxList = e.detail.value;
				uni.setStorageSync('checkboxList', JSON.stringify(this.checkboxList))
			},
			// 输入
			changeEv(e) {
				console.log(e, '====>e')
				let data = (uni.getStorageSync('ISS') && JSON.parse(uni.getStorageSync(
					'ISS'))) || [];
				if (data.some((item) => item.I == e)) {
					uni.showLoading({})
					this.oder.price = ''
					let that = this;
					this.$nextTick(() => {
						Socket1.socketTask['login1'].onMessage((res) => {

							// #ifdef APP-PLUS
							var arr = res.data.split('|');
							var poInfo = JSON.parse(arr[0]);
							console.log(poInfo, '===>成交')
							that.idata = poInfo
							if (!this.oder.price) {
								this.oder.price = poInfo.C
							}
							// #endif
							// #ifdef H5
							console.log(arr, '====>arr00000001', type, '------', res)
							var arr = res.data.split('|');

							var type = arr[0];


							if (type == 'I') {
								var poInfo = JSON.parse(arr[1]);
								console.log(poInfo, '===>成交')
								that.idata = poInfo
								if (!this.oder.price) {
									this.oder.price = poInfo.C
								}
							}
							// #endif
							uni.hideLoading();
						})
					})
					Socket1.socketTask['login1'].send({
						// data: ('S|' + 'rb2410,ag2412'),
						data: ('S|' + e),
						success: () => {
							console.log("发送websocket中...");
						},
						fail: (err) => {

						}
					})
				}
			},
			// 构建合约
			contract() {
				let that = this;
				this.oder.price = ''
				this.$nextTick(() => {
					Socket1.socketTask['login1'].onMessage((res) => {
						var arr = res.data.split('|');
						console.log(arr, '====>arr00000001')
						var type = arr[0];
						if (type == 'I') {
							var poInfo = JSON.parse(arr[1]);
							console.log(poInfo, '===>成交')
							that.idata = poInfo
							if (!this.oder.price) {
								this.oder.price = poInfo.C && poInfo.C.tofixed(2)
							}
						}

					})
				})
				Socket1.socketTask['login1'].send({
					// data: ('S|' + 'rb2410,ag2412'),
					data: ('S|' + this.checkboxList),
					success: () => {
						console.log("发送websocket中...");
					},
					fail: (err) => {

					}
				})

				this.$refs.contract.close()
			},
			// 构建报单  
			putOder() {
				Socket.socketTask['login'].send({
					data: 'O|' + JSON.stringify(getOrder(this.oder)),
					success: () => {
						console.log("发送websocket中...");
					},
					fail: (err) => {

					}
				})

			},
			//  权益  持仓
			chooseQY(data) {
				console.log(data, '===============000’')
				if (data.data) {
					// 报价内容  c_current  0 持仓  1 挂单  2 委托  3 成交

					this.tableData[0] = data.data.map((item) => {
						item.c_vol = item.vol - item.vol_closing + '/' + item.vol;
						item.c_dc = item.dc === 0 ? '多' : '空';
						return item
					})
				}
				if (data.data2) {
					// 报价内容  c_current  0 持仓  1 挂单  2 委托  3 成交
					this.tableData[2] = data.data2.map((item) => {
						item.c_dc = item.dc === 0 ? '多' : '空';
						item.c_insert_time = utoolTime(item.insert_time)
						item.c_status = item.status === 'canceled' ? '取消' : '挂起';

						return item
					})

					this.tableData[1] = data.data2.filter((item) => {
						if (item.status !== 'canceled') {
							item.c_dc = item.dc === 0 ? '多' : '空';
							item.c_insert_time = utoolTime(item.insert_time)
							item.c_status = item.status === 'canceled' ? '取消' : '挂起';

							return item
						}
					})
					console.log(this.tableData, '===========》data')
				}
				if (data.data3) {
					// 报价内容  c_current  0 持仓  1 挂单  2 委托  3 成交
					this.tableData[3] = data.data3.map((item) => {
						item.c_dc = item.dc === 0 ? '多' : '空';
						item.c_deal_time = utoolTime(item.deal_time)
						return item
					})

					console.log(this.tableData, '===========》data')
				}
				if (data.data1) {
					this.qyData = data.data1[0];
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let list = []
				// if(page.num == 1) list = []; //如果是第一页需手动制空列表
				// list=list.concat(res.list); //追加新数据
				this.mescroll.endSuccess(1); // 隐藏加载状态栏
				// this.mescroll.endErr();

			},
			// 切换菜单
			tabChange() {
				this.goods = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},
			switchTab(i) {
				this.tabIndex = i
				this.c_current = i;
			},
			openBackhand() {
				this.$refs.popup.open('bottom')
			},
			cloneBackhand() {
				this.$refs.popup.close()
			},
			change(e) {
				console.log(e)
			},
			toManagement() {
				uni.navigateTo({
					url: '/pages/transaction/transaction-management/transaction-management'
				})
			},
			// 操作弹窗
			openPingduo(val) {
				//  1 开多 2 开空 3 开平
				this.payType = val;
				this.$refs.pingduo.open()
			},

			// 确定 取消
			closePingduo(type = 1) {
				// type 1 取消  2 确定
				if (type == 1) {
					this.$refs.pingduo.close()
				} else if (type == 2) {
					// oder: {
					// instid: 'TA405',
					// dc: 0, // 0 多 1 空
					// kp: 0, // 0 开 1 平
					// price: 5950,
					// vol: 1 //数量
					// }
					if (this.payType == 1) {
						this.oder.kp = 0;
						this.oder.dc = 0;
					} else if (this.payType == 2) {
						this.oder.kp = 0;
						this.oder.dc = 1;

					} else if (this.payType == 3) {
						this.oder.kp = 1;
						this.oder.dc = 1;
					}
					this.putOder()
					this.$refs.pingduo.close()
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #F4F5F7;
	}
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.header-wrap {
		width: 750rpx;
		background: #EE5953;
		position: relative;
		z-index: 9;
		box-sizing: border-box;
		.header-title {
			padding: 26rpx 24rpx 22rpx 22rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.header-left {
				display: flex;
				align-items: center;

				.header-left-name {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.header-left-state {
					display: flex;
					align-items: center;
					margin-top: 2rpx;

					.header-left-label {
						background-color: #FFA200;
						border-radius: 4rpx;
						font-size: 24rpx;
						line-height: 28rpx;
						color: #fff;
						text-align: center;
						padding: 6rpx;
					}

					.header-left-code {
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 6rpx;
					}

				}

				.header-left-arrow {
					width: 46rpx;
					height: 46rpx;
					margin-left: 6rpx;
				}
			}

			.header-right {
				display: flex;
				align-items: center;

				.header-right-item {
					width: 64rpx;
					height: 64rpx;
					margin-left: 26rpx;
				}
			}
		}
	}

	.content-plate {
		padding: 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;

		.data-overview {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.data-overview-item {
				display: flex;
				align-items: center;

				.data-overview-key {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.6);
				}

				.data-overview-val {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-left: 16rpx;
					flex: 1;
					overflow: hidden;
				}

				.data-overview-illustrate {
					width: 36rpx;
					height: 36rpx;
					margin-left: 12rpx;
				}
			}

		}
	}

	.data-situation {
		display: flex;
		justify-content: space-between;

		.search-box {
			width: 392rpx;
			height: 88rpx;
			border-radius: 16rpx;
			border: 2rpx solid #F4F5F7;
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.data-situation-box-right {
				width: 88rpx;
				height: 88rpx;
				background: rgba(238, 89, 83, 0.04);
				border-radius: 0rpx 16rpx 16rpx 0rpx;
				border: 2rpx solid #EE5953;
				display: flex;
				justify-content: center;
				align-items: center;

				.situation-search-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.data-situation-box-left {
				width: 88rpx;
				height: 88rpx;
				background: rgba(238, 89, 83, 0.04);
				border-radius: 16rpx 0rpx 0rpx 16rpx;
				border: 2rpx solid #EE5953;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.situation-control-icon {
				width: 32rpx;
				height: 32rpx;
				position: relative;

				.situation-control-minus {
					width: 32rpx;
					height: 4rpx;
					background-color: #EE5953;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.situation-control-add {
					width: 4rpx;
					height: 32rpx;
					background-color: #EE5953;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.situation-price {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				text-align: center;
			}

			.situation-input {
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.data-situation-right {
			margin-left: 30rpx;
		}

		.historical-price {
			width: 284rpx;
			height: 200rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F4F5F7;
			margin-top: 24rpx;
			display: flex;
			flex-direction: column;

			.new-price {
				height: 90rpx;
				border-bottom: 2rpx solid #F4F5F7;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 16rpx 0 28rpx;
				box-sizing: border-box;

				.price-label {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}

				.price-num {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #33C45B;
				}
			}

			.historical-price-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 16rpx 0 28rpx;
				flex: 1;

				.price-label {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}

				.price-num {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					// color: #33C45B;
				}

				.historical-num {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}
			}
		}

		.instructions {
			padding-top: 16rpx;

			.instructions-text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				margin-top: 12rpx;

				text {
					color: #EE5953;
				}
			}
		}
	}

	.order-grabbing-mode {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;

		.grabbing-mode-item {
			width: 218rpx;
			height: 98rpx;
			border-radius: 8rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&.mode1 {
				background-color: #FF3B30;
			}

			&.mode2 {
				background-color: #33C45B;
			}

			&.mode3 {
				background-color: #356FE5;
			}

			.grabbing-amount {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.grabbing-mode-text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.data-table {
		margin-top: 8rpx;

		.table-tab {
			height: 88rpx;
			padding: 24rpx 48rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			background-color: #fff;
			border-bottom: 2rpx solid #F4F5F7;

			.table-tab-item {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.4);
				position: relative;

				&.active {
					color: #EE5953;
				}

				&.active::after {
					content: '';
					display: block;
					width: 48rpx;
					height: 8rpx;
					background: #EE5953;
					border-radius: 4rpx;
					position: absolute;
					bottom: -24rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

		}

		.table-th {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.8);
		}

		.uni-table-td {
			padding: 24rpx 0;
		}

		.table-td {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.8);
			text-align: center;

			&.red {
				color: #FF3B30;
			}
		}
	}

	.operate-box {
		display: flex;
		justify-content: flex-end;

		.operate-but {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #356FE5;
			padding: 16rpx;
			margin-right: 16rpx;
		}
	}

	.uni-popup {
		z-index: 100;
	}

	.popup-content {
		width: 750rpx;
		height: 540rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -8rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;

		.popup-title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.8);
			text-align: center;
			padding: 38rpx 0;
			border-bottom: 2rpx solid #F6F7F9;
		}

		.clone-icon {
			position: absolute;
			top: 36rpx;
			right: 36rpx;
		}

		.backhand-data {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-top: 32rpx;

			.backhand-data-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.backhand-data-key {
				display: flex;
				align-items: center;

				.backhand-data-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.backhand-data-key-text {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.6);
				}
			}

			.backhand-data-val {
				font-size: 48rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.explanatory {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.4);
			text-align: center;
			margin-top: 40rpx;
		}

		.determine-but {
			width: 622rpx;
			height: 88rpx;
			background: #EE5953;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin: 16rpx auto;
		}
	}

	.pingduo-center {
		width: 568rpx;
		height: 586rpx;
		background: linear-gradient(180deg, #F2F8FF 0%, #FFFFFF 100%);
		border-radius: 16rpx;
		box-sizing: border-box;
		text-align: center;
		padding: 32rpx;

		.pingduo-title {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.8);
			line-height: 44rpx;
			text-align: center;
			margin-top: 24rpx;
		}

		.pingduo-form {
			margin-top: 24rpx;
		}

		.pingduo-form-row {
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.pingduo-form-key {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.4);
			}

			.pingduo-form-val {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				margin-left: 48rpx;
			}

			.table {
				border-radius: 4rpx;
				background-color: #EE5953;
				font-size: 20rpx;
				line-height: 28rpx;
				width: 28rpx;
				margin-left: 8rpx;
			}
		}

		.prompt {
			width: 504rpx;
			height: 50rpx;
			background: rgba(255, 59, 48, 0.04);
			border-radius: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FF3B30;
			align-items: center;
			line-height: 50rpx;
			margin-top: 24rpx;
		}

		.buts {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;

			.but {
				width: 236rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;

				text-align: center;
				line-height: 88rpx;

				&.but1 {
					background: #F4F5F7;
					color: rgba(0, 0, 0, 0.8);
				}

				&.but2 {
					background: #EE5953;
					color: #ffffff;
				}
			}
		}
	}
</style>